<template>
	<view>
		<view class="overflow-hidden  pt-4 px-8">
			<view class="flex overflow-x-scroll v-p-100 " :class='props.fixed?"flex-x-space-around":""' style="scrollbar-height: none;">
				<view v-for="(item,index) in props.list" :key='index'>
					<view class="px-12 p-8" :class="props.list[current].id==item.id?'line' : ''" @click="changeCate(item,index)">
						<text class="fs-15 text-nowrap">{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, defineProps,  } from 'vue'
	const emit = defineEmits(['selected'])
	const props = defineProps({
		list: {
			default: [],
			type: Array
		},
		fixed:{
			default: false,
			type: Boolean
		}
	})
	const current = ref(0)
	
	
	const changeCate = (e,index) => {
		current.value = index
		emit('selected', e)
	}
</script>

<style>
	.line {
		background: linear-gradient(90deg, #3D5CFF 100%, #3D5CFF 100%);
		background-size: 40% 6rpx;
		background-repeat: no-repeat;
		background-position: bottom;
	}
</style>